<template>
  <div class="chart_box">
    <div id="viewYxyj" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
 
<script>
export default {
  name:'viewYxyj',
  props: {
    ecWidth: ''
  },
  data() {
    return {
      option: {
        title: {
    text: '近七日销售趋势'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  // visualMap: {
  //   type: 'piecewise',
  //   show: false,
  //   dimension: 0,
  //   seriesIndex: 0,
  //   pieces: [
  //     {
  //       gt: 1,
  //       lt: 3,
  //       color: 'rgba(0, 0, 180, 0.4)'
  //     },
  //     {
  //       gt: 5,
  //       lt: 7,
  //       color: 'rgba(0, 0, 180, 0.4)'
  //     }
  //   ]
  // },
  series: [
    {
      
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 2 }, { xAxis: 3 }, { xAxis: 4 }, { xAxis: 5 }, { xAxis: 6 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
}
                        
    };
    
  },
 
  mounted() {
    this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
      this.init();

      });
  },
 
  methods: {
    init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/analysis/shop/week/sale",
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data;
            let dataArr=[]
            data.forEach(element => {
              let arr=[]
              arr.push(element.saleDate)
              arr.push(element.totalPrice)
              dataArr.push(arr)
            });
            console.log('data',dataArr)
            console.log('data',this.option)

            this.option.series[0].data=dataArr

               // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("viewYxyj"));

// 绘制图表
myChart.setOption(this.option);
window.addEventListener('resize', function () {
// 改变图表尺寸，在容器大小发生改变时需要手动调用
myChart.resize();
});
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();

   
    },
  },
};
</script>
<style scoped>
.chart_box{
        width: 95%;
        height: 300px; 
        margin: 0 auto;
}
</style>
